<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单输入绑定</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    <!-- 引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <h1>表单输入绑定</h1>
        <!-- 复选框 -->
        <h2>复选框</h2>
        <input type="checkbox" v-model="interests" value="足球">足球
        <input type="checkbox" v-model="interests" value="篮球">篮球
        <input type="checkbox" v-model="interests" value="排球">排球
        <input type="checkbox" v-model="interests" value="乒乓球">乒乓球
        <p>你选中的体育项目是：{{interests}}</p>
        <!-- element复选框 -->
        <el-checkbox-group v-model="interests">
            <el-checkbox label="足球"></el-checkbox>
            <el-checkbox label="篮球"></el-checkbox>
            <el-checkbox label="排球"></el-checkbox>
            <el-checkbox label="乒乓球"></el-checkbox>
        </el-checkbox-group>
        <!-- 单选按钮 -->
        <h2>单选按钮</h2>
        <label>五一放假：</label>
        <input type="radio" value="回家" v-model="choice">回家
        <input type="radio" value="留校" v-model="choice">留校
        <div>
            <label>去向：</label>
            <el-radio-group v-model="city">
                <el-radio-button label="泸州"></el-radio-button>
                <el-radio-button label="成都"></el-radio-button>
                <el-radio-button label="上海"></el-radio-button>
                <el-radio-button label="北京"></el-radio-button>
            </el-radio-group>
        </div>
        <!-- 选择框 -->
        <select v-model="searches" multiple>
            <option v-for="(opt, index) in project" :value="opt.value">
                {{opt.value}}
            </option>
        </select>
        你的选择是：{{searches}}
        <!-- 用户注册 -->
        <h2>用户注册</h2>
        <form>
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username" v-model="tempForm.username"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="text" name="password" v-model="tempForm.password"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="gender" value="1" v-model="tempForm.gender">男
                        <input type="radio" name="gender" value="0" v-model="tempForm.gender">女
                    </td>
                </tr>
                <tr>
                    <td>邮箱</td>
                    <td><input type="text" name="email" v-model="tempForm.email"></td>
                </tr>
                <tr>
                    <td><input type="submit" value="注册" @click.prevent="handleRegister"></td>
                    <td><input type="reset" value="重置" @click.prevent="handleReset"></td>
                </tr>
            </table>
        </form>
        <!-- element 用户注册 -->
        <h2>element表单注册</h2>
        <div style="width: 500px;">
            <el-form :model="elForm" :rules="rules" ref="elForm" label-width="100px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="elForm.name" placeholder="请填写姓名"></el-input>
                </el-form-item>
                <el-form-item label="学校" prop="school">
                    <el-select v-model="elForm.school" placeholder="请选择学校">
                        <el-option v-for="(shcool,index) in shcoolOpt" :key="index" :value="shcool"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预约时间" required>
                    <el-col :span="11">
                        <el-form-item>
                            <el-date-picker type="date" placeholder="选择日期" v-model="elForm.date1" style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item>
                            <el-time-picker placeholder="选择时间" v-model="elForm.date2" style="width: 100%;">
                                </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input placeholder="填写邮箱" v-model="elForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                    <el-input placeholder="填写手机号码" v-model="elForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" placeholder="可填写备注" v-model="elForm.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('elForm')">提交</el-button>
                    <el-button type="warning" @click="resetForm('elForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <script>
        const App = {
            computed: {
            },
            data() {
                // 自定义规则
                let phoneRule = (rule, value, callback) => {
                    let reg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/
                    if (this.elForm.phone == '' || this.elForm.phone == undefined) {
                        callback(new Error('电话号码必填'))
                    } else if (!reg.test(this.elForm.phone)) {
                        callback(new Error('手机号码不符合规则'))
                    } else {
                        return true
                    }
                }
                return {
                    tempForm: {
                        username: '',
                        password: '',
                        gender: '',
                        email: ''
                    },
                    shcoolOpt: ['泸州职业技术学院', '西南医科大学', '四川轻化工大学'],
                    elForm: {
                        name: '',
                        school: '',
                        date1: '',
                        date2: '',
                        email: '',
                        phone: '',
                        desc: ''
                    },
                    project: [
                        { index: 1, value: '篮球' },
                        { index: 2, value: '足球' },
                        { index: 3, value: '排球' },
                        { index: 4, value: '游泳' }
                    ],
                    interests: ['足球', '游泳'],
                    choice: '',
                    city: '泸州',
                    searches: [],
                    // 表单验证规则
                    rules: {
                        name: [
                            { required: true, message: '姓名为必填项', trigger: 'blur' },
                            { min: 2, max: 6, message: '姓名长度为2-6', trigger: 'blur' }
                        ],
                        school: [
                            { required: true, message: '学校必填', trigger: 'change' }
                        ],
                        date1: [
                            { type: 'date', required: true, message: '日期必填', trigger: 'change' }
                        ],
                        date2: [
                            { type: 'date', required: true, message: '时间必填', trigger: 'blur' }
                        ],
                        email: [
                            { type: 'email', required: true, message: '请填写正确的邮箱地址', trigger: 'blur' }
                        ],
                        // 通过validator属性指定自定义规则
                        phone: [
                            { validator: phoneRule, trigger: 'blur', required: true }
                        ]
                    }
                }
            },
            methods: {
                handleRegister() {
                    console.log(this.tempForm)
                },
                handleReset() {
                    this.tempForm = {}
                },
                // 点击提交后
                submitForm(formName) {
                    this.$refs[formName].validate((valid => {
                        if (valid) {
                            // 发送post请求到后端，后端再对数据进行一次校验
                        } else {
                            return false
                        }
                    }))
                },
                // 重置表单
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        };

        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>

</html>
<style type="text/css">
</style>